<template>
	<div class="menu-container">
		<router-link v-for="item in items" :to="item.name" :exact="item.exact">
			<Icon :type="item.icon"></Icon>
			<span>{{ item.text }}</span>
		</router-link>
	</div>
</template>

<script>
/* 该组件需要横向撑满容器，背景色透明 */
import Icon from '@/components/Icon'
export default {
	name: 'Menu',
	components: { Icon },
	data() {
		return {
			items: [
				{ name: { name: 'home' }, icon: 'home', text: '首页', exact: true },
				{ name: { name: 'blog' }, icon: 'blog', text: '文章', exact: false },
				{ name: { name: 'about' }, icon: 'about', text: '关于我', exact: true },
				{ name: { name: 'project' }, icon: 'code', text: '项目&效果', exact: true },
				{ name: { name: 'message' }, icon: 'chat', text: '留言板', exact: true },
			],
		}
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.menu-container {
	width: 100%;
	background-color: transparent;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	color: @gray;
	& > a {
		width: 100%;
		padding: 10px 0;
		padding-left: 30px;
		display: flex;
		gap: 8px;
		align-items: center;
		i {
			font-size: 12px;
		}
	}
	& > a:hover {
		background-color: @words;
	}
	& > a.router-link-active {
		background-color: @primary;
		color: white;
	}
}
</style>
